<template>
  <div class="support">
    <!-- 标题区域 -->
    <section class="support-header">
      <div class="container">
        <h1 class="page-title">技术支持中心</h1>
        <p class="page-subtitle">我们随时准备倾听你的声音，为你解决任何问题</p>
      </div>
    </section>

    <!-- 主要内容区域 -->
    <section class="support-content">
      <div class="container">
        <!-- 快速导航 -->
        <div class="support-nav">
          <div
            class="nav-item"
            :class="{ active: activeSection === 'faq' }"
            @click="showSection('faq')"
          >
            <i class="fas fa-question-circle"></i>
            <span>常见问题</span>
          </div>
          <div
            class="nav-item"
            :class="{ active: activeSection === 'contact' }"
            @click="showSection('contact')"
          >
            <i class="fas fa-envelope"></i>
            <span>联系我们</span>
          </div>
          <div
            class="nav-item"
            :class="{ active: activeSection === 'feedback' }"
            @click="showSection('feedback')"
          >
            <i class="fas fa-comment-dots"></i>
            <span>反馈建议</span>
          </div>
          <div
            class="nav-item"
            :class="{ active: activeSection === 'troubleshoot' }"
            @click="showSection('troubleshoot')"
          >
            <i class="fas fa-tools"></i>
            <span>故障排查</span>
          </div>
        </div>

        <!-- 常见问题区域 -->
        <div class="section-content" v-if="activeSection === 'faq'">
          <h2 class="section-title">常见问题</h2>
          <div class="faq-container">
            <div
              class="faq-item"
              v-for="(item, index) in faqItems"
              :key="index"
            >
              <div class="faq-question" @click="toggleFaq(index)">
                <span>{{ item.question }}</span>
                <i
                  :class="[
                    'fas',
                    faqOpen[index] ? 'fa-chevron-up' : 'fa-chevron-down',
                  ]"
                ></i>
              </div>
              <div class="faq-answer" v-show="faqOpen[index]">
                <p>{{ item.answer }}</p>
              </div>
            </div>
          </div>
        </div>

        <!-- 联系我们区域 -->
        <div class="section-content" v-else-if="activeSection === 'contact'">
          <h2 class="section-title">联系我们</h2>
          <div class="contact-container">
            <div class="contact-methods">
              <div class="contact-item">
                <i class="fas fa-envelope"></i>
                <div class="contact-info">
                  <h3>电子邮箱</h3>
                  <p>support@xiaodaoyu.com</p>
                  <p class="contact-time">
                    工作日 9:00-21:00，节假日 10:00-18:00
                  </p>
                </div>
              </div>
              <div class="contact-item">
                <i class="fab fa-weixin"></i>
                <div class="contact-info">
                  <h3>微信公众号</h3>
                  <p>小岛屿App</p>
                  
                    <img
                      src="/images/qrcode/subscription.jpg"
                       class="wechat-qr"
                      alt="微信公众号二维码"
                    />
                  
                </div>
              </div>
              <div class="contact-item">
                <i class="fas fa-headset"></i>
                <div class="contact-info">
                  <h3>在线客服</h3>
                  <p>打开小岛屿App - 我的 - 在线客服</p>
                  <p class="contact-time">24小时在线，通常5分钟内响应</p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 反馈建议区域 -->
        <div class="section-content" v-else-if="activeSection === 'feedback'">
          <h2 class="section-title">反馈建议</h2>
          <div class="feedback-form">
            <form @submit.prevent="submitFeedback">
              <div class="form-group">
                <label for="feedback-type">反馈类型</label>
                <select id="feedback-type" v-model="feedbackData.type">
                  <option value="bug">功能故障</option>
                  <option value="suggestion">功能建议</option>
                  <option value="compliment">表扬鼓励</option>
                  <option value="other">其他问题</option>
                </select>
              </div>
              <div class="form-group">
                <label for="feedback-content">反馈内容</label>
                <textarea
                  id="feedback-content"
                  v-model="feedbackData.content"
                  rows="5"
                  placeholder="请详细描述您遇到的问题或建议..."
                ></textarea>
              </div>
              <div class="form-group">
                <label for="contact-way">联系方式（选填）</label>
                <input
                  type="text"
                  id="contact-way"
                  v-model="feedbackData.contact"
                  placeholder="邮箱或微信，方便我们联系您"
                />
              </div>
              <div class="form-group">
                <label>上传截图（选填）</label>
                <div class="upload-area" @click="triggerFileUpload">
                  <i class="fas fa-cloud-upload-alt"></i>
                  <p v-if="!feedbackData.fileName">点击上传截图</p>
                  <p v-else class="file-name">{{ feedbackData.fileName }}</p>
                  <input
                    type="file"
                    ref="fileInput"
                    style="display: none"
                    accept="image/*"
                    @change="handleFileUpload"
                  />
                </div>
              </div>
              <div class="form-actions">
                <button
                  type="submit"
                  class="btn btn-primary"
                  :disabled="submitting"
                >
                  <i v-if="submitting" class="fas fa-spinner fa-spin"></i>
                  {{ submitting ? "提交中..." : "提交反馈" }}
                </button>
              </div>
            </form>
          </div>
        </div>

        <!-- 故障排查区域 -->
        <div
          class="section-content"
          v-else-if="activeSection === 'troubleshoot'"
        >
          <h2 class="section-title">故障排查</h2>
          <div class="troubleshoot-container">
            <div class="troubleshoot-item">
              <h3><i class="fas fa-mobile-alt"></i> 无法登录/注册</h3>
              <ul class="troubleshoot-steps">
                <li>• 检查网络连接是否正常</li>
                <li>• 尝试清除缓存并重新打开App</li>
                <li>• 检查手机号是否输入正确</li>
                <li>• 验证码有效期为5分钟，请尝试重新获取</li>
                <li>• 如仍无法解决，请联系在线客服</li>
              </ul>
            </div>
            <div class="troubleshoot-item">
              <h3><i class="fas fa-comments"></i> 消息收发问题</h3>
              <ul class="troubleshoot-steps">
                <li>• 检查网络连接是否正常</li>
                <li>• 尝试退出账号并重新登录</li>
                <li>• 检查App通知权限是否开启</li>
                <li>• 确认是否已将对方加入黑名单</li>
                <li>• 检查App是否为最新版本</li>
              </ul>
            </div>
            <div class="troubleshoot-item">
              <h3><i class="fas fa-battery-full"></i> App卡顿/耗电</h3>
              <ul class="troubleshoot-steps">
                <li>• 尝试关闭其他后台运行的应用</li>
                <li>• 清除App缓存数据</li>
                <li>• 检查设备存储空间是否充足</li>
                <li>• 确保设备系统和App均为最新版本</li>
                <li>• 如问题持续，请卸载并重新安装App</li>
              </ul>
            </div>
            <div class="troubleshoot-item">
              <h3><i class="fas fa-map-marker-alt"></i> 定位问题</h3>
              <ul class="troubleshoot-steps">
                <li>• 检查设备定位权限是否开启</li>
                <li>• 确认GPS信号是否良好</li>
                <li>• 尝试在开阔地带使用定位功能</li>
                <li>• 检查系统设置中的定位服务是否开启</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </section>


    <!-- 提交成功弹窗 -->
    <div class="modal" v-if="showSuccessModal" @click.self="closeSuccessModal">
      <div class="modal-content">
        <div class="success-icon">
          <i class="fas fa-check-circle"></i>
        </div>
        <h3>反馈提交成功</h3>
        <p>感谢您的反馈，我们会尽快处理并与您联系</p>
        <button class="btn btn-primary" @click="closeSuccessModal">确定</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Support",
  data() {
    return {
      activeSection: "faq",
      faqOpen: [],
      submitting: false,
      showSuccessModal: false,
      feedbackData: {
        type: "suggestion",
        content: "",
        contact: "",
        fileName: "",
      },
      faqItems: [
        {
          question: "如何注册小岛屿账号？",
          answer:
            '下载小岛屿App后，打开应用点击"注册"，输入手机号码并获取验证码，设置密码后即可完成注册。注册过程中如有问题，请联系在线客服。',
        },
        {
          question: "忘记密码怎么办？",
          answer:
            '在登录页面点击"忘记密码"，输入注册手机号并获取验证码，验证通过后可以设置新密码。',
        },
        {
          question: "如何修改个人资料？",
          answer:
            '登录后进入"我的"页面，点击头像或个人信息区域，即可修改头像、昵称、个性签名等个人资料。',
        },
        {
          question: "如何创建或加入兴趣小组？",
          answer:
            '在首页或发现页面，点击"兴趣小组"入口，您可以浏览推荐的小组或搜索感兴趣的小组申请加入。如果没有找到合适的小组，也可以点击"创建小组"按钮创建属于自己的兴趣小组。',
        },
        {
          question: "如何举报不当内容或用户？",
          answer:
            '对于不当内容，您可以点击内容右上角的"..."按钮，选择"举报"并填写举报原因。对于不当用户，您可以进入对方个人主页，点击右上角"..."按钮选择"举报"。我们会尽快审核并处理您的举报。',
        },
        {
          question: "小岛屿App是否收费？",
          answer:
            "小岛屿App的基本功能完全免费。我们同时提供部分增值服务和高级功能，用户可以根据需求自愿购买。",
        },
        {
          question: "如何关闭消息通知？",
          answer:
            '您可以在设备的系统设置中找到小岛屿App，调整通知权限。也可以在App内的"设置"-"消息通知"中自定义各类消息的接收方式。',
        },
        {
          question: "账号可以在多个设备上登录吗？",
          answer:
            "目前一个账号可以同时在多个设备上登录，但为了您的账号安全，建议不要在陌生设备上登录。如果发现账号异常登录，请立即修改密码并联系客服。",
        },
      ],
    };
  },
  mounted() {
    // 初始化FAQ展开状态
    this.faqOpen = new Array(this.faqItems.length).fill(false);
  },
  methods: {
    showSection(section) {
      this.activeSection = section;
      // 滚动到内容顶部
      setTimeout(() => {
        window.scrollTo({ top: 0, behavior: "smooth" });
      }, 100);
    },
    toggleFaq(index) {
      this.faqOpen[index] = !this.faqOpen[index];
    },
    triggerFileUpload() {
      this.$refs.fileInput.click();
    },
    handleFileUpload(event) {
      if (event.target.files && event.target.files[0]) {
        this.feedbackData.fileName = event.target.files[0].name;
        // 这里可以添加文件上传逻辑
      }
    },
    async submitFeedback() {
      if (!this.feedbackData.content.trim()) {
        alert("请填写反馈内容");
        return;
      }

      this.submitting = true;

      try {
        // 模拟API请求
        await new Promise((resolve) => setTimeout(resolve, 1500));

        // 显示成功弹窗
        this.showSuccessModal = true;

        // 重置表单
        this.feedbackData = {
          type: "suggestion",
          content: "",
          contact: "",
          fileName: "",
        };

        // 清空文件输入
        if (this.$refs.fileInput) {
          this.$refs.fileInput.value = "";
        }
      } catch (error) {
        alert("提交失败，请稍后重试");
        console.error("提交反馈失败:", error);
      } finally {
        this.submitting = false;
      }
    },
    closeSuccessModal() {
      this.showSuccessModal = false;
    },
  },
};
</script>

<style scoped>
/* 全局样式 */
.support {
  margin-top: var(--spacing-3xl);
  background: var(--background-color);
  overflow-x: hidden;
  touch-action: pan-y;
}

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.section-title {
  font-size: 2rem;
  color: var(--text-primary);
  margin-bottom: 1.5rem;
  text-align: center;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
}

.btn-primary {
  background-color: #3a86ff;
  color: white;
}

.btn-primary:hover:not(:disabled) {
  background-color: #2377ff;
  transform: translateY(-2px);
}

.btn-primary:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

/* 头部样式 */
.support-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: var(--spacing-xxl) 0;
  text-align: center;
}

.page-title {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.page-subtitle {
  font-size: 1.25rem;
  opacity: 0.9;
  max-width: 600px;
  margin: 0 auto;
}

/* 内容区域样式 */
.support-content {
  padding: 3rem 0;
}

/* 导航样式 */
.support-nav {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 3rem;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 60px;
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  transition: all 0.3s ease;
}

.nav-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.nav-item.active {
  background-color: #3a86ff;
  color: white;
}

.nav-item i {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

/* 区域内容通用样式 */
.section-content {
  background-color: white;
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* FAQ样式 */
.faq-container {
  max-width: 800px;
  margin: 0 auto;
}

.faq-item {
  margin-bottom: 1rem;
  border-bottom: 1px solid #eee;
  padding-bottom: 1rem;
}

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1.1rem;
  font-weight: 500;
  color: #333;
  cursor: pointer;
  padding: 1rem 0;
}

.faq-question:hover {
  color: #3a86ff;
}

.faq-answer {
  padding: 0 0 1rem;
  color: #666;
  line-height: 1.6;
}

/* 联系我们样式 */
.contact-container {
  max-width: 800px;
  margin: 0 auto;
}

.contact-methods {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.contact-item {
  display: flex;
  gap: 1.5rem;
  padding: 1.5rem;
  background-color: #f8f9fa;
  border-radius: 12px;
}

.contact-item i {
  font-size: 2rem;
  color: #3a86ff;
  flex-shrink: 0;
}

.contact-info h3 {
  margin-bottom: 0.5rem;
  font-size: 1.25rem;
}

.contact-info p {
  margin-bottom: 0.5rem;
  color: #666;
}

.contact-time {
  font-size: 0.9rem;
  color: #999;
}

.wechat-qr {
  width: 120px;
  height: 120px;
  border-radius: 8px;
}

/* 反馈表单样式 */
.feedback-form {
  max-width: 600px;
  margin: 0 auto;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: #333;
}

.form-group select,
.form-group input,
.form-group textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 1rem;
  transition: border-color 0.3s ease;
}

.form-group select:focus,
.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #3a86ff;
}

.upload-area {
  border: 2px dashed #ddd;
  border-radius: 8px;
  padding: 2rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.upload-area:hover {
  border-color: #3a86ff;
  background-color: #f8f9fa;
}

.upload-area i {
  font-size: 2.5rem;
  color: #999;
  margin-bottom: 0.5rem;
}

.file-name {
  color: #3a86ff;
  font-weight: 500;
}

.form-actions {
  text-align: center;
  margin-top: 2rem;
}

/* 故障排查样式 */
.troubleshoot-container {
  max-width: 800px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2rem;
}

.troubleshoot-item {
  background-color: #f8f9fa;
  padding: 1.5rem;
  border-radius: 12px;
}

.troubleshoot-item h3 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  color: #333;
}

.troubleshoot-item h3 i {
  color: #3a86ff;
}

.troubleshoot-steps {
  line-height: 1.8;
  color: #666;
}

.troubleshoot-steps li {
  margin-bottom: 0.5rem;
}


/* 弹窗样式 */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background-color: white;
  border-radius: 16px;
  padding: 2.5rem;
  text-align: center;
  max-width: 400px;
  width: 90%;
  animation: modalAppear 0.3s ease;
}

@keyframes modalAppear {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.success-icon {
  width: 80px;
  height: 80px;
  background-color: #e6f7e6;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
}

.success-icon i {
  font-size: 3rem;
  color: #52c41a;
}

.modal-content h3 {
  margin-bottom: 0.75rem;
  color: #333;
}

.modal-content p {
  color: #666;
  margin-bottom: 2rem;
  line-height: 1.6;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .page-title {
    font-size: 2rem;
  }

  .page-subtitle {
    font-size: 1rem;
  }

  .support-nav {
    gap: 0.75rem;
  }

  .nav-item {
    width: 100px;
    height: 100px;
  }

  .nav-item i {
    font-size: 1.5rem;
  }

  .nav-item span {
    font-size: 0.875rem;
  }

  .contact-methods {
    grid-template-columns: 1fr;
  }

  .troubleshoot-container {
    grid-template-columns: 1fr;
  }

  .cards-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .section-content {
    padding: 1.5rem;
  }
}

@media (max-width: 480px) {
  .support-header {
    padding: 3rem 0;
  }

  .support-content,
  .help-cards {
    padding: 2rem 0;
  }

  .modal-content {
    padding: 2rem;
  }
}
</style>
